<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>InfiniteScroll 无限滚动</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}

.infinite-list-wrapper {
  height: 300px;
  text-align: center;
}
.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
.infinite-list-wrapper .list-item + .list-item {
  margin-top: 10px;
}
</style>
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">滚动至底部时，加载更多数据。</p>
	<p class="desc">在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。</p>
	<ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
		<li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
	</ul>
	
	<el-divider content-position="left">禁用加载</el-divider><!-- =============================================================== -->
	<p class="desc"></p>
	<div class="infinite-list-wrapper" style="overflow: auto">
		<ul v-infinite-scroll="load2" class="list" :infinite-scroll-disabled="disabled">
			<li v-for="i in count2" :key="i" class="list-item">{{ i }}</li>
		</ul>
		<p v-if="loading">Loading...</p>
		<p v-if="noMore">No more</p>
	</div>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			count: 0,
			count2: 10,
			loading: false,
		}
	},
	computed: {
		noMore: function(){
			return this.count2 >= 20;
		},
		disabled: function(){
			return this.loading || this.noMore;
			// return this.noMore;
		},
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		load(){
			this.count += 2;
		},
		load2(){
			this.loading = true;
			setTimeout(() => {
				this.count2 += 2;
				this.loading = false
			}, 1000);
		},
		
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>